<template>
  <view class="edit-container">
    <nav-bar :title="pageTitle" @back="handleBack"></nav-bar>
    
    <view class="edit-content">
      <!-- 昵称编辑 -->
      <template v-if="type === 'nickname'">
        <uni-easyinput
          v-model="inputValue"
          placeholder="请输入昵称"
          maxlength="20"
          :clearable="true"
        ></uni-easyinput>
        <text class="tip">2-20个字符，可以是中文、字母、数字</text>
      </template>
      
      <!-- 生日编辑 -->
      <template v-else-if="type === 'birthday'">
        <uni-datetime-picker
          v-model="inputValue"
          type="date"
          :clear-icon="false"
          :end="today"
        ></uni-datetime-picker>
        <text class="tip">选择您的生日日期</text>
      </template>
      
      <!-- 个性签名编辑 -->
      <template v-else-if="type === 'signature'">
        <uni-easyinput
          v-model="inputValue"
          type="textarea"
          placeholder="写一句话介绍自己"
          maxlength="50"
          :clearable="true"
        ></uni-easyinput>
        <text class="tip">最多50个字符</text>
      </template>
      
      <!-- 保存按钮 -->
      <button 
        class="save-btn" 
        :disabled="!isValid || loading"
        @click="handleSave"
      >保存</button>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/common/NavBar.vue'
import { checkLogin } from '@/utils/auth'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      type: '',
      inputValue: '',
      loading: false,
      today: new Date().toISOString().split('T')[0]
    }
  },
  computed: {
    pageTitle() {
      const titles = {
        nickname: '修改昵称',
        birthday: '修改生日',
        signature: '修改个性签名'
      }
      return titles[this.type] || '编辑资料'
    },
    isValid() {
      if (!this.inputValue) return false
      
      switch (this.type) {
        case 'nickname':
          return /^[\u4e00-\u9fa5a-zA-Z0-9]{2,20}$/.test(this.inputValue)
        case 'birthday':
          return /^\d{4}-\d{2}-\d{2}$/.test(this.inputValue)
        case 'signature':
          return this.inputValue.length <= 50
        default:
          return false
      }
    }
  },
  onLoad(options) {
    // 检查登录状态
    if (!checkLogin()) {
      uni.navigateBack()
      return
    }
    
    this.type = options.type || ''
    this.inputValue = options.value || ''
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    },
    async handleSave() {
      if (!this.isValid || this.loading) return
      
      this.loading = true
      uni.showLoading({
        title: '保存中...',
        mask: true
      })
      
      try {
        // 构造更新数据
        const updateData = {
          [this.type]: this.inputValue
        }
        
        const res = await this.$api.user.profile.update(updateData)
        
        if (res.code === 200) {
          // 更新成功
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          
          // 延迟返回上一页，让用户看到成功提示
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          throw new Error(res.message || '保存失败')
        }
      } catch (error) {
        console.error('保存失败:', error)
        uni.showToast({
          title: error.message || '保存失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: calc(var(--status-bar-height) + 88rpx);
}

.edit-content {
  margin-top: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  
  .tip {
    font-size: 24rpx;
    color: #999;
    margin-top: 20rpx;
    display: block;
  }
  
  :deep(.uni-easyinput) {
    .uni-easyinput__content {
      min-height: 88rpx;
      background-color: #f8f8f8;
      border-radius: 12rpx;
      padding: 0 24rpx;
      
      .uni-easyinput__content-input {
        font-size: 28rpx;
        color: #333;
      }
    }
    
    &.is-textarea {
      .uni-easyinput__content {
        min-height: 200rpx;
        padding: 24rpx;
        
        .uni-easyinput__content-textarea {
          font-size: 28rpx;
          color: #333;
        }
      }
    }
  }
  
  :deep(.uni-date) {
    .uni-date-editor {
      min-height: 88rpx;
      background-color: #f8f8f8;
      border-radius: 12rpx;
      padding: 0 24rpx;
      
      .uni-date-editor--x {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}

.save-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: $uni-primary;
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
  margin-top: 60rpx;
  
  &:active {
    opacity: 0.8;
  }
  
  &[disabled] {
    background-color: #ccc;
    opacity: 1;
  }
}
</style> 